<template>
	<view class="homeHead">
		<view class="statusBar" :style="{height: getStatusBarHeight() + 'px'}"></view>
		<view class="titleBar" :style="{height:getTitleBarHeight() + 'px'}">今日鸡汤虽迟但到</view>
		<view class="content">
			<view class="time">
				<view class="left">{{new Date().getDate() }}</view>
				<view class="right">
					<view class="year">
						{{ `${new Date().getFullYear()}年${new Date().getMonth() + 1}月` }}
					</view>
					<view class="week">{{ getChineseWeekday() }}</view>
				</view>
			</view>
			<view class="pic">
				<image src="/static/images/headPic.png" mode="heightFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight,
		getTitleBarHeight
	} from "@/utils/system.js";
	import {
		getChineseWeekday
	} from "@/utils/tools.js"
</script>

<style lang="scss">
	.homeHead {
		background:
			radial-gradient(90% 300px at left top, #d5f8fc, transparent),
			radial-gradient(60% 300px at right top, #d3cbfc, transparent);

		.titleBar {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			font-weight: bolder;
			font-size: 50rpx;
			margin-left: 40rpx;
		}

		.content {
			margin-top: -50rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.time {
				display: flex;
				justify-content: space-around;
				align-items: center;
				gap: 20rpx;

				.left {
					font-size: 100rpx;
					font-weight: bolder;
				}

				.right {
					font-weight: 400;

					.week {
						font-size: 60rpx;
						font-weight: 800;
					}
				}
			}

			.pic {
				height: 250rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>